<template>
    <div>
        <div class="w-form-header">
            <div>
                <el-button
                    type="success"
                    @click="save('1')"
                    :loading="saveLoading"
                    >保存</el-button
                >
            </div>
        </div>
        <div class="gva-form-box">
            <div class="w-form-box">
                <div class="list-header">基本信息</div>
            </div>
            <el-descriptions
                class="margin-top"
                title=""
                :column="4"
                size="large"
                border
            >
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">SBU编号</div>
                    </template>
                    {{ formData.sbuName }}
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">创建时间</div>
                    </template>
                    {{ formatDate(formData.CreatedAt) }}
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">创建人</div>
                    </template>
                    {{ formData.CreatedUser || "-" }}
                </el-descriptions-item>
                <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                >
                    <template #label>
                        <div class="cell-item">更新人</div>
                    </template>
                    {{ formData.UpdatedUser || "-" }}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="gva-form-box">
            <div class="w-form-box">
                <div class="list-header">成员管理</div>
                <div>
                    <el-select
                        v-model="formData.member"
                        placeholder="请选择成员"
                        style="width: 100%"
                        filterable
                        multiple
                    >
                        <el-option
                            v-for="(item, key) in memberListOptions"
                            :key="key"
                            :label="item.userName"
                            :value="item.userName"
                        />
                    </el-select>
                </div>
            </div>
        </div>
        <div class="gva-form-box">
            <div class="w-form-box">
                <div class="list-header">关联客户</div>
                <div>
                    <el-select
                        v-model="formData.customerNum"
                        placeholder="请选择客户"
                        style="width: 100%"
                        filterable
                        multiple
                    >
                        <el-option
                            v-for="(item, key) in customerListOptions"
                            :key="key"
                            :label="item.customerNum"
                            :value="item.customerNum"
                        />
                    </el-select>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { createSbuData, updateSbuData, findSbuData } from "@/api/confSbuData";

defineOptions({
    name: "sbuDataAdd",
});

// 自动获取字典
import { getDictFunc } from "@/utils/format";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import { emitter } from "@/utils/bus.js";
// 全量引入格式化工具 请按需保留
import { formatDate } from "@/utils/format";

import { getUserList } from "@/api/user";
import { getCustomerInfoList } from "@/api/confCustomerInfo";

const route = useRoute();
const router = useRouter();

const type = ref("");
const formData = ref({
    sbuName: "",
    member: [],
    customerNum: [],
});
const saveLoading = ref(false);

const memberListOptions = ref([]); // 人员列表
const customerListOptions = ref([]); // 客户列表

// 验证规则
const rule = reactive({
    sbuName: [{ required: true, message: "请输入sbu名称", trigger: "blur" }],
    member: [{ required: true, message: "请选择成员", trigger: "change" }],
    customerNum: [
        { required: true, message: "请选择客户编号", trigger: "change" },
    ],
});

const elFormRef = ref();

// 获取人员列表
const getMemberList = async () => {
    memberListOptions.value = [];
    const table = await getUserList({
        page: 1,
        pageSize: 9999,
    });
    if (table.code === 0) {
        memberListOptions.value = table.data.list;
    }
};

// 获取客户列表
const getCustomerList = async () => {
    const table = await getCustomerInfoList({
        page: 1,
        pageSize: 9999,
    });
    if (table.code === 0) {
        customerListOptions.value = table.data.list;
    }
};

// 初始化方法
const init = async () => {
    getMemberList();
    getCustomerList();

    // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
    if (route.query.id) {
        const res = await findSbuData({ ID: route.query.id });
        if (res.code === 0) {
            formData.value = res.data.resbuData;
            formData.value["member"] = res.data.resbuData.member
                .split(",")
                .map((word) => {
                    const num = Number(word);
                    return Number.isNaN(num) ? word : num;
                });
            formData.value["customerNum"] =
                res.data.resbuData.customerNum.split(",");
            type.value = "update";
        }
    } else {
        type.value = "create";
    }
};

init();
// 保存按钮
const save = async () => {
    let res;
    let submitData = {};
    let { sbuName, member, customerNum } = formData.value;
    Object.assign(submitData, formData.value);
    submitData["sbuName"] = sbuName;
    submitData["member"] = member.join(",");
    submitData["customerNum"] = customerNum.join(",");
    saveLoading.value = true;
    res = await updateSbuData(submitData);
    saveLoading.value = false;
    if (res.code === 0) {
        ElMessage({
            type: "success",
            message: type.value == "create" ? "创建成功" : "更改成功",
        });
        emitter.emit("closeThisPage", {
            path: "/layout/configureDatabase/sbuData",
        });
    }
};

// 返回按钮
const back = () => {
    router.go(-1);
};
</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
.gva-form-box {
    :deep(.my-label) {
        width: 9%;
    }
    :deep(.my-content) {
        width: 16%;
    }
}
</style>
